<template>
  <div class="container">
    <el-form ref="form" :model="formData" label-width="100px" label-position="left" style="padding: 0 10px">
      <div class="c-box">
        <!-- 基础信息部分 -->
        <div class="upload-title-box">
          <div class="upload-title">基础信息</div>
        </div>
        <hk-form
          ref="hkFormRef1"
          :disabled="isDisabled"
          :form-labels="basicArr"
          :rules="formRules"
          :data="formData"
          :dict-list="dictList"
          :label-width="130"
          :btn-hidden="true">
          <template #filter-bidderMoney>
            <el-input
              v-model="formData.bidderMoney"
              maxlength="10"
              class="sm-input"
              placeholder="请输入中标金额"
              @input="changeBidder">
              <el-button slot="append">万</el-button>
            </el-input>
          </template>
          <!-- <template #filter-dealSituationList> </template> -->
        </hk-form>
      </div>
      <div class="c-box">
        <div class="table-box">
          <div style="display: flex">
            <i
              v-if="showWatch"
              class="el-icon-arrow-down c-box-title"
              style="font-size: 16px"
              @click="showWatch = !showWatch" />
            <i
              v-if="!showWatch"
              class="el-icon-arrow-right c-box-title"
              style="font-size: 16px"
              @click="showWatch = !showWatch" />
            <div
              class="c-box-title"
              style="font-size: 16px; font-weight: 500; margin-left: 5px; margin-bottom: 10px"
              @click="showWatch = !showWatch">
              成交情况
            </div>
          </div>

          <div v-if="showWatch" class="hk-flex-column">
            <hk-table
              ref="hkTable"
              :disabled="isDisabled"
              :table-data="qualificationData"
              :table-columns="qualificationList"
              :show-pag="false"
              :loading="loading"
              :rules="formRules"
              is-need-index
              :dict-list="dictList"
              operate>
              <template #procureFile="scope">
                <div style="width: 100%;">
                  <el-button
                    style="display: block"
                    type="text"
                    :disabled="isDisabled"
                    @click="handleImport(scope.row, 'procureFile', 'procureFileName')"
                    >上传文件</el-button
                  >

                  <span class="up-txt">支持扩展名：.pdf .png .jpg</span>
                  <el-button
                    :disabled="isFileDisabled"
                    @click="openPro(scope.row)"
                    class="up-txt"
                    style="display: block"
                    type="text"
                    >{{ qualificationData[scope.row.$index].procureFileName }}</el-button
                  >
                  <!-- <div class="up-txt up-color">
                    {{ qualificationData[scope.row.$index].procureFileName }}
                  </div> -->
                </div>
              </template>
              <template #giveFile="scope">
                <div style="width: 100%;">
                  <el-button
                    :disabled="isDisabled"
                    @click="handleImport(scope.row, 'giveFile', 'giveFileName')"
                    type="text"
                    style="display: block"
                    >上传文件</el-button
                  >
                  <span class="up-txt">支持扩展名：.pdf .png .jpg</span>
                  <el-button
                    :disabled="isFileDisabled"
                    @click="openGive(scope.row)"
                    class="up-txt"
                    style="display: block"
                    type="text"
                    >{{ qualificationData[scope.row.$index].giveFileName }}</el-button
                  >
                </div>
              </template>
              <template #applicationFile="scope">
                <div style="width: 100%;">
                  <el-button
                    :disabled="isDisabled"
                    @click="handleImport(scope.row, 'applicationFile', 'applicationFileName')"
                    type="text"
                    style="display: block"
                    >上传文件</el-button
                  >
                  <span class="up-txt">支持扩展名：.pdf .png .jpg</span>
                  <el-button
                    :disabled="isFileDisabled"
                    @click="openApplication(scope.row)"
                    class="up-txt"
                    style="display: block"
                    type="text"
                    >{{ qualificationData[scope.row.$index].applicationFileName }}</el-button
                  >
                </div>
              </template>
              <template #giveDate="scope">
                <el-date-picker
                  size="small"
                  :disabled="isDisabled"
                  v-model="qualificationData[scope.row.$index].giveDateTime"
                  style="width: 100%; margin: 5px 0 13px"
                  type="datetimerange"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="changeTime($event, scope.row)" />
              </template>
              <template #operate="scope">
                <el-button :disabled="isDisabled" type="text" @click="handleDelete(scope.row.index)">删除</el-button>
              </template>
            </hk-table>
            <el-button v-if="title !== '查看'" icon="el-icon-plus" class="add-row" @click="addRow">增加行</el-button>
          </div>
        </div>
      </div>
    </el-form>

    <hk-upload
      ref="import_dia"
      :url="url"
      :title="upTitle"
      :accept="accept"
      :other-data="otherData"
      :success-desc="'文件上传成功'"
      @submit="getInfoFile" />
    <footer>
      <el-button v-if="title !== '查看'" type="primary" @click="submitForm">保 存</el-button>
      <el-button @click="cancel">取 消</el-button>
    </footer>
  </div>
</template>

<script>
import HkForm from '@/components/Hk-Form'
import Treeselect from '@riophae/vue-treeselect'
import { getDict, selectUnitName, insert, update, detailItem } from '@/api/specialProject/smItem'

import HkTable from '@/components/Hk-Table/index.vue'

export default {
  components: { HkForm, Treeselect, HkTable },

  data() {
    return {
      showWatch: true,
      title: '新增',
      upTitle: '上传文件',
      url: window.baseUrl.action + '/attachment/upload',
      // 表单数据
      formData: {},
      accept: '.pdf,.png,.jpg',
      // 基础信息
      basicArr: [
        {
          label: '项目名称',
          field: 'projectName',
          type: 'input',
          maxlength: 50,
        },
        {
          label: '项目编号',
          field: 'projectNo',
          type: 'input',
          maxlength: 50,
        },
        {
          label: '项目简介',
          field: 'content',
          type: 'textarea',
          hidden: false,
          attrs: {
            rows: '3',
          },
          maxlength: 256,
          span: 24,
        },
        {
          label: '采购类型',
          field: 'procureType',
          type: 'select',
          list: 'typeList',
        },
        {
          label: '中标承建单位',
          field: 'bidderContractor',
          type: 'select',
          list: 'unitList',
        },
        {
          label: '中标时间',
          field: 'bidderTime',
          type: 'dateTime',
          format: 'yyyy-MM-dd HH:mm:ss',
        },
        {
          label: '中标金额',
          field: 'bidderMoney',
          type: 'slot',
        },
        // {
        //   label: '成交情况',
        //   field: 'dealSituationList',
        //   type: 'slot',
        //   span: 24,
        // },
      ],

      // 表单校验
      formRules: {
        projectName: [{ required: true, message: '不能为空', trigger: 'blur' }],
        name: [{ required: true, message: '不能为空', trigger: 'blur' }],
        projectNo: [{ required: true, message: '不能为空', trigger: 'blur' }],
        bidderContractor: [{ required: true, message: '不能为空', trigger: 'blur' }],
        procureType: [{ required: true, message: '请选择', trigger: 'blur' }],
        bidderTime: [{ required: true, message: '请选择', trigger: 'blur' }],
        dealSituationList: [{ required: false, message: '请完善内容', trigger: 'blur' }],
        bidderMoney: [
          { required: true, message: '不能为空', trigger: 'blur' },
          { type: 'number', message: '必须为数字值', trigger: 'blur' },
        ],
        procureContent: [{ required: true, message: '不能为空', trigger: 'blur' }],
        supplierId: [{ required: true, message: '请选择', trigger: 'blur' }],
        giveDate: [{ required: true, message: '请选择', trigger: 'blur' }],
        procureNum: [
          { required: true, message: '不能为空', trigger: 'blur' },
          { type: 'number', message: '必须为数字值', trigger: 'blur' },
        ],
        dealMoney: [
          { required: true, message: '不能为空', trigger: 'blur' },
          { type: 'number', message: '必须为数字值', trigger: 'blur' },
        ],
      },
      // 表单校验
      tableRules: {},
      dictList: {
        unitList: [],
        typeList: [],
      },
      queryParams: {
        current: 1,
        size: 10,
      },
      total: 0,
      loading: false,
      isDisabled: false,
      isFileDisabled: false,
      qualificationData: [{}],
      qualificationList: [
        { label: '标包', param: 'name', type: 'input', width: '100', maxlength: 50 },
        { label: '采购内容/标的名称', param: 'procureContent', type: 'input', maxlength: 50 },
        { label: '采购数量', param: 'procureNum', type: 'input', maxlength: 50, width: '100' },
        { label: '采购文件', param: 'procureFile', type: 'slot', width: '170' },
        { label: '成交金额', param: 'dealMoney', type: 'input', maxlength: 50 },
        { label: '供应商名称', param: 'supplierId', type: 'select', list: 'unitList' },
        { label: '服务周期', param: 'giveDate', type: 'slot', width: '250' },
        { label: '申请证书', param: 'applicationFile', type: 'slot', width: '170' },
        { label: '服务合同', param: 'giveFile', type: 'slot', width: '170' },
        { label: '备注', param: 'notes', type: 'input', maxlength: 50 },
      ],
      age: '年龄',
      otherData: {},
      showT: true,
      id: null,
    }
  },
  computed: {},
  created() {
    this.title = this.$route.query.title
    this.id = this.$route.query.id
    if (this.title !== '新增') {
      this.getDetail(this.id)
    }
    if (this.title == '查看') {
      this.qualificationList.forEach((item) => {
        item.disabled = true
      })
      this.isDisabled = true
      this.isFileDisabled = false
    }
    this.getDicts()
  },
  mounted() {},
  methods: {
    getDetail(id) {
      detailItem(id).then((res) => {
        this.formData = res
        this.formData.bidderMoney = Number(res.bidderMoney)
        this.formData.bidderContractor = Number(res.bidderContractor)
        this.qualificationData = res.dealSituationList
        for (var item of this.qualificationData) {
          item.supplierId = Number(item.supplierId)
          if (item.giveDate) {
            var tm = item.giveDate.split(' - ')
            item.giveDateTime = tm
          }
        }
      })
    },
    //  周期
    changeTime(e, item) {
      console.log(e, item, 'eee')
      this.qualificationData[item.$index].giveDate = e[0] + ' - ' + e[1]
      this.qualificationData[item.$index].giveDateTime = e
    },

    isNumber(val) {
      var regPos = /^\d+(\.\d+)?$/
      var regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/
      if (regPos.test(val) || regNeg.test(val)) {
        return true
      } else {
        return false
      }
    },
    changeBidder(e) {
      if (this.isNumber(e)) {
        this.formData.bidderMoney = Number(e)
      }
    },
    getInfoFile(e) {
      var url = e.oData.url
      var name = e.oData.name
      var obj = {
        ...e.oData.row,
        [`${url}`]: e.fileUrl,
        [`${name}`]: e.fileName,
      }
      this.$set(this.qualificationData, e.oData.index, obj)
      this.$forceUpdate()
    },
    handleImport(e, url, name) {
      var obj = {
        index: e.$index,
        row: e.row,
        name: name,
        url: url,
      }
      this.otherData = obj
      this.$refs.import_dia.show()
    },
    getDicts() {
      getDict({ code: 'procureType' }).then((res) => {
        this.dictList.typeList = res.map((o) => {
          o.label = o.dictValue
          o.value = o.dictKey
          return o
        })
      })
      selectUnitName().then((res) => {
        this.dictList.unitList = res.map((o) => {
          o.label = o.unitName
          o.value = Number(o.id)
          return o
        })
      })
    },
    addRow() {
      this.qualificationData.push({})
    },
    handleDelete(idx) {
      this.qualificationData.splice(idx, 1)
    },
    openPro(e) {
      window.open(window.baseUrl.default + e.row.procureFile)
    },
    openGive(e) {
      window.open(window.baseUrl.default + e.row.giveFile)
    },
    openApplication(e) {
      window.open(window.baseUrl.default + e.row.applicationFile)
    },
    // 提交事件
    async submitForm() {
      const res = await this.qualificationData
      const params = await this.$refs.hkFormRef1.handleFormSubmit('formLabels')
      console.log(params, 's')
      params.dealSituationList = res
      if (this.title == '新增') {
        insert(params).then((res) => {
          this.$message.success('新增成功')
          this.cancel()
        })
      } else if (this.title == '修改') {
        console.log(242, params)
        update(params).then((res) => {
          this.$message.success('修改成功')
          this.cancel()
        })
      }
    },
    cancel() {
      this.$router.go(-1)
    },
  },
}
</script>

  <style lang="scss" scoped>
#app.dark-theme {
  .container,
  footer {
    background: transparent !important;
  }
  .c-box {
    background: rgba(59, 139, 255, 0.1);
  }
  .sp-flex i {
    color: #4b6eef !important;
  }
}
.up-txt {
  width: 160px;
  white-space:break-spaces;
  word-break: break-all !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  font-size: 12px;
  text-align: left;
}
.add-row {
  margin-top: 20px;
}
.upload-title-box {
  height: 40px;
  width: 100%;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  // border-bottom: 1px solid rgba($color: #000000, $alpha: 8%);

  .upload-title {
    font-size: 16px;
    font-weight: 700;
    color: #000000;
  }
}
.container {
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #eef0f5;
}
.c-box {
  background: #fff;
  border-radius: 4px;
  padding: 20px;

  margin-bottom: 20px;
}
.el-form {
  flex: 1;
  overflow: auto;
}
footer {
  height: 70px;
  background: #fff;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 20px;
}

.empty-box {
  justify-content: center;
  align-items: center;
  display: flex;
}
.table-box {
}
.sm-input {
  ::v-deep {
    .el-input__inner {
      padding-right: 0 !important;
    }
  }
}
::v-deep {
  .el-button--text {
    padding: 0;
  }

  .el-input-group__append {
    background: transparent;
  }
}
</style>

